<template>
  <view>
    <view
      class="box"
      style="min-width: 120px; min-height: 35px"
      @click="openPopup"
    >
      <view>
        <van-tag
          style="margin-bottom: 10rpx"
          v-for="(item, index) in cascaderText"
          :key="index"
          :show="true"
          closeable
          size="medium"
          type="primary"
          @close="close"
        >
          {{ item }}
        </van-tag>
      </view>
      <!-- <uni-easyinput
        type="textarea"
        :disabled="true"
        :inputBorder="false"
        v-model="cascaderText"
        placeholder="请选择"
        clearable
      ></uni-easyinput> -->
    </view>

    <ba-tree-picker
      ref="popup"
      :selectedData="selectData"
      :multiple="true"
      @select-change="selectChange"
      title="选择"
      :localdata="options"
      valueKey="id"
      textKey="name"
      childrenKey="sub"
    />
  </view>
</template>

<script setup>
import baTreePicker from "@/components/ba-tree-picker/ba-tree-picker.vue"
import { ref, onMounted, computed, watch } from "vue"
const props = defineProps({
  value: {
    type: Array,
    default: () => []
  }
})
const popup = ref(null)
const customFieldName = {
  text: "name",
  value: "id",
  children: "sub"
}
const emits = defineEmits(["change", "update:value"])
const value = ref("")
const showPicker = ref(false)
const cascaderText = ref([])
const options = uni.getStorageSync("dictMap").regionList
const selectData = ref([])
console.log(options)

const openPopup = () => {
  popup.value._show()
}
const cascaderValue = computed({
  get() {
    return props.value
  },
  set(val) {
    emits("update:value", val)
  }
})

watch(
  () => cascaderValue.value,
  (val) => {
    console.log(val)
    if (val.length > 0) {
      selectData.value = val.map((item) => item[item.length - 1])
      console.log(selectData.value)

      let str = ""
      val.flat().forEach((id, idx) => {
        const sperator =
          idx !== 0 && (idx + 1) % 3 === 0 && idx !== val.flat().length - 1
            ? ","
            : ""
        str += findName(id, options)
        str += sperator
        cascaderText.value = str.split(",")
      })
    }
  }
)
const close = (index) => {
  cascaderValue.value.splice(index, 1)
  cascaderText.value.splice(index, 1)
}
const findName = (id, list) => {
  if (!id) return ""
  for (let index = 0; index < list.length; index++) {
    const item = list[index]
    if (item.id == id) {
      return item.name
    }
    if (item.id != id && item.sub && item.sub.length > 0) {
      const nameInSub = findName(id, item.sub)
      if (nameInSub) {
        return nameInSub
      }
    }
  }
}
const fieldNames = {
  text: "name",
  value: "id",
  children: "sub"
}
const selectChange = (ids, names) => {
  console.log(ids, names)
  // let str = ""
  // value.selectedOptions.forEach((opt) => {
  //   str += opt.name
  // })
  console.log()

  cascaderText.value.push(
    ...names.map((item) => item.map((v) => v.name).join(""))
  )

  cascaderValue.value = ids
  emits("change", cascaderValue.value)
  emits("update:value", cascaderValue.value)
}
</script>

<style lang="scss" scoped>
.box {
}
</style>
